<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换展示组件</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/tupianqiehuan.css"></link>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <h1>图片切换展示组件</h1>
        </div>
        
        <div class="image-gallery">
            <div class="main-image-container">
                <img 
                    :src="currentImage.src" 
                    :alt="currentImage.alt" 
                    class="main-image"
                >
                <div class="image-info">
                    <h3 class="image-title">{{ currentImage.title }}</h3>
                    <p class="image-description">{{ currentImage.description }}</p>
                </div>
            </div>
            
            <div class="thumbnail-container">
                <div 
                    v-for="(image, index) in images" 
                    :key="index"
                    :class="['thumbnail', { active: currentIndex === index }]"
                    @click="selectImage(index)"
                >
                    <img 
                        :src="image.thumbnail" 
                        :alt="image.alt"
                    >
                </div>
            </div>
            
            <div class="navigation">
                <button 
                    class="nav-btn" 
                    @click="prevImage" 
                    :disabled="currentIndex === 0"
                >
                    ← 上一张
                </button>
                <button 
                    class="nav-btn" 
                    @click="nextImage" 
                    :disabled="currentIndex === images.length - 1"
                >
                    下一张 →
                </button>
            </div>
            
            <div class="counter">
                {{ currentIndex + 1 }} / {{ images.length }}
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentIndex: 0,
                images: [
                    {
                        src: './imgs/kill.png',
                        thumbnail: './imgs/kill.png',
                        alt: '科幻风格武器设计概念图',
                        title: 'ROMERO\'S AFTERMATH',
                        description: '这是一张科幻风格武器设计概念图，标题为"Romero\'s Aftermath"。图中呈现两把战术突击步枪，采用灰黑主色调并搭配棕色木质握把部件。枪械表面带有战损痕迹与金属光泽。'
                    },
                    {
                        src: './imgs/renmo.png',
                        thumbnail: './imgs/renmo.png',
                        alt: '女性角色设计',
                        title: '女性角色设计',
                        description: '图片中是一位女性的全身像，从正面、侧面和背面三个角度展示。她有着金色的长卷发，戴着一副眼镜，增添了几分知性气质。整体形象时尚且具有魅力。'
                    }
                ]
            },
            computed: {
                currentImage() {
                    return this.images[this.currentIndex];
                }
            },
            methods: {
                selectImage(index) {
                    this.currentIndex = index;
                },
                nextImage() {
                    if (this.currentIndex < this.images.length - 1) {
                        this.currentIndex++;
                    }
                },
                prevImage() {
                    if (this.currentIndex > 0) {
                        this.currentIndex--;
                    }
                }
            }
        });
    </script>
</body>
</html>